<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery Timelinr-动感十足的超酷jQuery时间轴插件</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/jq22-demo.css">
	<link rel="stylesheet" href="css/style.css" media="screen" />
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<header class="jq22-header">
		<h1>jQuery Timelinr-动感十足的超酷jQuery时间轴插件 <span>A Simple jQuery Timeline Plugin - Timelinr</span></h1>
		
		<div class="jq22-demo center">
		  <a href="index.html" class="current">Horizontal</a>
		  <a href="index2.html">Vertical</a>
		  <a href="index3.html">Autoplay</a>
		</div>
	</header>
	<section class="jq22-container">
		<div id="timeline">
			<ul id="dates">
				<li><a href="#1900">1900</a></li>
				<li><a href="#1930">1930</a></li>
				<li><a href="#1944">1944</a></li>
				<li><a href="#1950">1950</a></li>
				<li><a href="#1971">1971</a></li>
				<li><a href="#1977">1977</a></li>
				<li><a href="#1989">1989</a></li>
				<li><a href="#1999">1999</a></li>
				<li><a href="#2001">2001</a></li>
				<li><a href="#2011">2011</a></li>
			</ul>
			<ul id="issues">
				<li id="1900">
					<img src="images/1.png" width="256" height="256" />
					<h1>1900</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="1930">
					<img src="images/2.png" width="256" height="256" />
					<h1>1930</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="1944">
					<img src="images/3.png" width="256" height="256" />
					<h1>1944</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="1950">
					<img src="images/4.png" width="256" height="256" />
					<h1>1950</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="1971">
					<img src="images/5.png" width="256" height="256" />
					<h1>1971</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="1977">
					<img src="images/6.png" width="256" height="256" />
					<h1>1977</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="1989">
					<img src="images/7.png" width="256" height="256" />
					<h1>1989</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="1999">
					<img src="images/8.png" width="256" height="256" />
					<h1>1999</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="2001">
					<img src="images/9.png" width="256" height="256" />
					<h1>2001</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
				<li id="2011">
					<img src="images/10.png" width="256" height="256" />
					<h1>2011</h1>
					<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
				</li>
			</ul>
			<div id="grad_left"></div>
			<div id="grad_right"></div>
			<a href="#" id="next">+</a>
			<a href="#" id="prev">-</a>
		</div>
	</section>

	
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="js/jquery.timelinr-0.9.6.js"></script>
	<script>
		$(function(){
			$().timelinr({
				arrowKeys: 'true'
			})
		});
	</script>
</body>
</html>